﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Popup.Master" AutoEventWireup="true"
    CodeBehind="HierarchyDetailTree.aspx.cs" Inherits="PromotionEngine.HierarchyDetailTree" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table style="width: 100%;">
        <tr>
            <td style="width: 40%;" valign="top">
                <span style="font-weight: 700; color: #CC3300; font-size: 14pt;"><span class="k-icon k-i-tick">
                </span>&nbsp;Add Hierarchy Detail</span>
                <p>
                </p>
                <table border="0">
                    <tr>
                        <td style="width: 200px;">
                            Name
                        </td>
                        <td>
                            <input id="HierarchyDetailName" name="HierarchyDetailName" value="" class="k-textbox" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td align="left">
                            <button class="k-button k-button-icontext k-primary" id="appendNodeToSelected" type="button"
                                style="width: 100%;">
                                Add
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span id="errMsg" class="fake"></span>
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top">
                <div id="treeview">
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="Scripts/Kendo/query.jeditable.js"></script>
    <script id="treeview-template" type="text/kendo-ui-template">
    #if(item.hierarchyDetailID=='-1')
             {#
    <span class="k-icon k-i-sort-asc"></span>
    #}#
       #if(item.hierarchyDetailID!='-1')
             {#
           <span class='child'>  #: item.hierarchyDetailName #</span>
            # } else {#
            <span class='root'>#:item.hierarchyDetailName #</span>
            #}#
            # if (item.hierarchyDetailID!='-1') { #
                <a class='delete-link' href='\#'></a>
            # } #
    </script>
    <script type="text/javascript">
        var treeview;
        var selectedNoteID = "";
        var selectedNode;
        var hierarchyID;
        var hierarchyName;
        var oHierarchyDetail = {};
        $(document).ready(function () {
            hierarchyID = '<%= Request.QueryString["HierarchyID"] %>';
            hierarchyName = '<%= Request.QueryString["HierarchyName"] %>';
            // Delete button behavior
            $(document).on("click", ".delete-link", function (e) {
                var r = confirm("Are you sure you want to remove this item?");
                if (r == true) {
                    e.preventDefault();
                    var treeview = $("#treeview").data("kendoTreeView");
                    var selectedNode = $(this).closest(".k-item");
                    $.ajax({
                        type: "POST",
                        url: "HierarchyDetailTree.aspx/DeleteHierarchyDetail",
                        data: JSON.stringify({
                            hierarchyDetailID: selectedNoteID
                        }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            treeview.remove(selectedNode);
                        },
                        error: function (xhr, status, err) {
                            var err = eval("(" + xhr.responseText + ")");
                            alert(err.Message);
                        }
                    });
                }

            });
            var homogeneous = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        url: "HierarchyDetailTree.aspx/GetData",
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    },
                    parameterMap: function (data, operation) {
                        if (operation === "read") {
                            return { hierarchyID: hierarchyID, hierarchyName: JSON.stringify(hierarchyName) };
                        }
                    }
                },
                type: "odata",
                schema: {
                    data: function (a) {

                        if (a.d != null) {
                            var data = a.d;
                            data = "[" + data + "]";
                            return JSON.parse(data);
                        }
                    },
                    model: {
                        id: "hierarchyDetailID",
                        fields: {
                            hierarchyDetailID: { type: "string", validation: { required: true} },
                            hierarchyDetailName: { type: "string", validation: { required: true} }
                        },
                        children: "items"
                    }
                }
            });

            $("#treeview").kendoTreeView({
                template: kendo.template($("#treeview-template").html()),
                dataSource: homogeneous,
                dataTextField: "hierarchyDetailName",
                dataValueField: "hierarchyDetailID",
                dataBound: onDataBound,
                select: function (e) {
                    selectedNode = $("#treeview").getKendoTreeView().dataItem(e.node);
                    selectedNoteID = $("#treeview").getKendoTreeView().dataItem(e.node).hierarchyDetailID;
                }
            }).on('dblclick', '.child', function (event) {
                $target = $(event.target);

                $target.editable(function (value, settings) {

                    $.ajax({
                        type: "POST",
                        url: "HierarchyDetailTree.aspx/UpdateHierarchyDetail",
                        data: JSON.stringify({
                            hierarchyDetailID: selectedNoteID,
                            hierarchyDetailName: JSON.stringify(value)
                        }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                        },
                        error: function (xhr, status, err) {
                            var err = eval("(" + xhr.responseText + ")");
                            alert(err.Message);
                        }
                    });
                    return value;
                },
                {
                    event: 'dblclick',
                    cssclass: 'treeInlineEdit'
                });

                $target.trigger('dblclick', [event]);
                return false;
            });


            treeview = $("#treeview").data("kendoTreeView");

            var handleTextBox = function (callback) {
                return function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        callback(e);
                    }
                };
            };
            var append = handleTextBox(function (e) {
                $("#errMsg").text('');
                var selectedNode = treeview.select();
                // passing a falsy value as the second append() parameter
                // will append the new node to the root group
                if (selectedNode.length == 0) {
                    selectedNode = null;
                }
                if ($("#HierarchyDetailName").val() == '') {
                    $("#errMsg").text("Please input hierarchy detail name.");
                    return;
                }
                if (selectedNoteID == '') {
                    $("#errMsg").text("Please select Father Node.");
                    return;
                }
                oHierarchyDetail.HierarchyDetailName = $("#HierarchyDetailName").val();
                oHierarchyDetail.HierarchyFatherID = selectedNoteID;
                oHierarchyDetail.HierarchyDetailID = 0;
                oHierarchyDetail.HierarchyID = hierarchyID;

                $.ajax({
                    type: "POST",
                    url: "HierarchyDetailTree.aspx/CreateHierarchyDetail",
                    data: JSON.stringify({
                        oHierarchyDetail: JSON.stringify(oHierarchyDetail)
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        treeview.dataSource.read();
                    },
                    error: function (xhr, status, err) {
                        var err = eval("(" + xhr.responseText + ")");
                        alert(err.Message);
                    }
                });

                treeview.append({
                    hierarchyDetailName: $("#HierarchyDetailName").val()
                }, selectedNode);
            });
            $("#appendNodeToSelected").click(append);
            $("#appendNodeText").keypress(append);
        });
        function onDataBound(e) {
            treeview.expand(".k-item");
            if (selectedNoteID != "") {
                var dataSource = treeview.dataSource;
                var dataItem = dataSource.get(selectedNoteID);
                if (dataItem != null) {
                    var selected = treeview.findByUid(dataItem.uid);
                    treeview.select(selected);
                }
            }
        }
      
    </script>
    <style type="text/css">
        .treeInlineEdit > input
        {
            font-size: 1em;
            min-width: 10em;
            min-height: 2em;
        }
        .root
        {
            font-weight: 700;
            color: #CC3300;
            font-size: 14pt;
        }
        .box .k-textbox
        {
            width: 200px;
        }
        .delete-link
        {
            width: 12px;
            height: 12px;
            background: transparent url("/Images/close.png") no-repeat 50% 50%;
            overflow: hidden;
            display: inline-block;
            font-size: 0;
            line-height: 0;
            vertical-align: top;
            margin: 2px 0 0 3px;
            -webkit-border-radius: 5px;
            -mox-border-radius: 5px;
            border-radius: 5px;
        }
    </style>
</asp:Content>
